// 商品信息大盒子
.commodity {
    width: 100%;
  
  
    // 标题
    .title {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin: 20px 0;
  
      p {
        width: 45%;
        height: 3px;
        background: #d3dce6;
      }
  
      span {
        font-size: 18px;
      }
    }
  
    // 内容
    .commodity_ul {
      display: flex;
      flex-wrap: wrap;
      /* 允许盒子换行 */
      width: 70%;
      margin: auto;
      cursor: pointer;
  
      // 物品小盒子
      .commodity_ul_li {
        /* 让每个盒子占据 25% 的宽度，减去间距 */
        flex: 0 1 calc(25% - 20px);
        /* 设置盒子之间的间距 */
        margin: 10px;
  
        // 详情
        .commodity_ul_li_info {
          width: 250px;
          height: 220px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          margin-bottom: 20px;
          padding: 10px;
          border-radius: 5px;
  
          // background-color: #f4f4f493;
          // border: 5px solid #8496bd35;
          box-shadow: 0 0 10px #99a9bf;
          transition: all 0.5s;
  
          &:hover {
            // width: 400px;
            // height: 210px;
            box-shadow: 0 0 20px #969696;
          }
  
          .img {
            position: relative;
            width: 50%;
            height: 180px;
            border: 1px solid #99a9bf;
            margin: 10px;
            line-height: 180px;
            overflow: hidden;
  
            img {
              // width: 100%;
              height: 100%;
              object-fit: contain;
              position: absolute;
              transform: translateX(-50%);
              top: 0;
              left: 50%;
              right: 0;
              bottom: 0;
            }
          }
  
          .detail {
            width: 50%;
            text-align: left;
  
            p {
              height: 20px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 16px 0;
              font-weight: 600;
  
              span {
                margin-left: 5px;
                font-size: 16px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
  
  @media (max-width: 1300px) {
    .commodity_ul {
      width: 90% !important;
    }
  }
  
  @media (max-width: 1200px) {
    .commodity_ul {
      width: 100% !important;
    }
  }
  